<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Invite People</title>
    </h:head>
    <h:body>
        <ui:composition template="./templateuser.xhtml">
            <ui:define name="center">
                <h:form id="form">
                    <p:toolbar style="margin-left: 15px;margin-top: 15px;margin-right: 20px;">
                        <p:toolbarGroup align="left" style="padding-top: 10px;padding-left: 10px">
                            <p:outputLabel value="Invite people to #{inviteBean.event.name}"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">
                            <p:commandButton value="End" action="#{inviteBean.exit()}" />
                        </p:toolbarGroup>
                    </p:toolbar>
                    
                    <p:panel header="Search people to invite">
                        <h:panelGrid columns="4" id="inviteGrid">
                            
                            <h:outputLabel for="username">Search by username:</h:outputLabel>
                            <p:inputText id="username" value="#{inviteBean.username}">
                                <p:ajax update="usernamemsg"/>
                            </p:inputText>
                            <p:message id="usernamemsg" for="username" />
                            <p:commandButton value="Search" update="inviteGrid,resultslist"
                                         action="#{inviteBean.search()}" />
                            
                        </h:panelGrid>
                        
                    </p:panel>
                    
                    <p:dataList id="invitedlist" value="#{inviteBean.invited}" var="user" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated"
                                style="margin-left: 15px;margin-top: 15px;margin-right: 20px;">
                        <f:facet name="header">
                            Invited People
                        </f:facet>
                        <h:outputText value="#{user.username}" style="display:inline-block"/>
                    </p:dataList>
                    
                    <p:dataList id="resultslist" value="#{inviteBean.users}" var="user" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated"
                                style="margin-left: 15px;margin-top: 15px;margin-right: 20px;">
                        <f:facet name="header">
                            Results
                        </f:facet>
                        <p:commandLink update=":form:userDetail" oncomplete="PF('userDialog').show()" title="View Detail" styleClass="ui-icon ui-icon-search" style="float:left;margin-right:10px">
                            <f:setPropertyActionListener value="#{user}" target="#{inviteBean.selectedUser}" />
                            <h:outputText value="#{user.username}" />
                        </p:commandLink>
                        <p:commandLink title="Invite" update="resultslist,:form:invitedlist" styleClass="ui-icon ui-icon-mail-closed" action="#{inviteBean.invite()}" style="display:inline-block;margin-right: 10 px">
                            <f:setPropertyActionListener value="#{user}" target="#{inviteBean.selectedUser}" />
                            <h:outputText value="invite" />
                        </p:commandLink>
                        <h:outputText value="#{user.username}" style="display:inline-block;margin-left: 15px"/>
                    </p:dataList>

                    <p:dialog header="User Info" widgetVar="userDialog" showEffect="blind" hideEffect="explode" resizable="false">
                        <p:outputPanel id="userDetail" style="text-align:center;">
                            <p:panelGrid  columns="2" rendered="#{not empty inviteBean.selectedUser}" columnClasses="label,value">
                                <f:facet name="header">
                                     
                                </f:facet>

                                <h:outputText value="Username:" />
                                <h:outputText value="#{inviteBean.selectedUser.username}" />

                                <h:outputText value="Name:" />
                                <h:outputText value="#{inviteBean.selectedUser.name}" />

                                <h:outputText value="Surname:" />
                                <h:outputText value="#{inviteBean.selectedUser.surname}" />

                            </p:panelGrid>
                        </p:outputPanel>
                    </p:dialog>

                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
